<template>
  <el-page-header @click="goback">
    <template #content>
      <span class="text-large font-600 mr-3" style="margin-bottom: 20px">{{
        roleName
      }}</span>
    </template>
  </el-page-header>
  <el-card class="role-card">
    <div class="side-select">
      <el-row>
        <el-text size="large">{{ roleName }} -- 权限</el-text>
      </el-row>
      <el-tree
        ref="treeRef"
        style="width: 100%"
        :data="disabledMenu"
        show-checkbox
        node-key="id"
        :default-checked-keys="defaultKeys"
        :check-strictly="true"
      >
        <template #default="{ data }">
          <span class="menu">
            <span>{{ data.label }}</span>
            <el-tag :type="type(data.type)" size="small">{{
              test(data.type)
            }}</el-tag>
          </span>
        </template>
      </el-tree>
    </div>
    <div class="home-box">
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getUserListA"
        :haveImport="false"
      >
        <template #left-btn>
          <el-row :gutter="10">
            <el-col :span="1.5">
              <accreditUser
                @get-accredit-emps="getUserListA"
                :roleId="roleId"
              />
            </el-col>
            <el-col :span="1.5">
              <!-- <cancelAccredit :selection="selection" /> -->
            </el-col>
          </el-row>
        </template>
      </right-toolbar>
      <el-text size="small">以下用户为该职务授权员工</el-text>
      <el-table
        :data="limit()"
        v-loading="loading"
        ref="tableRef"
        element-loading-text="加载中..."
        :row-key="(row) => row.id"
        border
        @selection-change="selectChange"
      >
        <el-table-column prop="num" label="工号" align="center" />

        <el-table-column prop="name" label="姓名" width="150" align="center" />

        <el-table-column label="部门" width="300" align="center">
          <template #default="{ row }">
            <el-text v-for="(item, index) in row.deptNames" :key="index">
              {{ item }}
              <br />
            </el-text>
          </template>
        </el-table-column>

        <el-table-column label="岗位" width="180" align="center">
          <template #default="{ row }">
            <el-text v-for="(item, index) in row.postName" :key="index">
              {{ item }}
              <br />
            </el-text>
          </template>
        </el-table-column>

        <el-table-column
          prop="roleName"
          label="职务名称"
          width="180"
          align="center"
        />
      </el-table>

      <!--分页组件-->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="pageNum"
        v-model:limit="pageSize"
        :pageSizes="[10, 20, 30, 40]"
        @pagination="limit()"
      />
    </div>
  </el-card>
</template>
<script>
export default {
  name: "getRoleList",
};
</script>
<script setup>
import { ref, computed, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import { getMenu, getMenuIds } from "@/service/api/role";
import { getEmpsByNumOrName } from "@/service/api/user";
import { toDisabledMenu } from "@/utils/transform";
import eventBus from "@/utils/event-bus";
import accreditUser from "./components/accreditUser.vue";
// import cancelAccredit from "./components/cancelAccredit.vue";

const route = useRoute();
const showSearch = ref(true);
const roleId = computed(() => route.query.roleId);
const roleName = computed(() => route.query.roleName);
const selection = ref([]);
const disabledMenu = ref([]);
const defaultKeys = ref([]);
const searchForm = ref({
  roleId: roleId,
});

const tableData = ref([]);
const total = ref(0);
const loading = ref(false);
const betweenTime = ref([]);

const { proxy } = getCurrentInstance();
const goback = () => {
  proxy.$router.go(-1);
};

const pageNum = ref(1);
const pageSize = ref(10);

//前端限制分页（tableData为当前展示页表格）
const limit = () => {
  return tableData.value.filter(
    (item, index) =>
      index < pageNum.value * pageSize.value &&
      index >= pageSize.value * (pageNum.value - 1)
  );
};

/**
 * 获取用户列表
 */
const getUserListA = async () => {
  if (betweenTime.length !== 0) {
    const [beginTime, endTime] = betweenTime.value;
    searchForm.value.beginTime = beginTime;
    searchForm.value.endTime = endTime;
  }
  const data = await getEmpsByNumOrName(searchForm.value);
  if (data !== null) {
    total.value = data.length;
    tableData.value = data;
  }
};

/**
 * 勾选表格CheckBox的回调函数-获取勾选的数组
 */
const selectChange = (select) => {
  selection.value = select;
};

const type = (type) => {
  if (type === 1) return "primary";
  else if (type === 2) return "success";
  else return "warning";
};

const test = (type) => {
  if (type === 1) return "目录";
  else if (type === 2) return "菜单";
  else return "按钮";
};

const accredit = async () => {
  if (roleId.value && roleName.value) {
    getUserListA();
    const menu = await getMenu();
    disabledMenu.value = toDisabledMenu(menu);
    defaultKeys.value = await getMenuIds(roleId.value);
  }
};

accredit();
</script>

<style lang="scss" scoped>
.role-card {
  :deep(.el-card__body) {
    display: flex;
    gap: 1.25rem;
  }
  .side-select {
    width: 23%;
    .el-row {
      margin-bottom: 15px;
    }
    .menu {
      display: inline-flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
    }

    :deep(.el-checkbox__inner::after) {
      border-color: #ffffff;
    }
    :deep(.el-checkbox__input.is-disabled.is-checked),
    :deep(.is-checked .el-checkbox__inner),
    :deep(.el-checkbox__input.is-disabled.is-indeterminate),
    :deep(.is-indeterminate .el-checkbox__inner) {
      background-color: var(--el-checkbox-checked-bg-color);
      border-color: var(--el-checkbox-checked-input-border-color);
      border-radius: 2px;
    }

    :deep(.el-checkbox__inner::before) {
      background-color: #ffffff;
      border-color: #ffffff;
    }
  }
  .home-box {
    width: 77%;
    .tip {
      display: inline-flex;
      align-items: center;
      margin-bottom: 8px;
      .el-text {
        line-height: 4px;
      }
    }
    .header {
      margin-bottom: 22px;
      text-align: right;
    }

    :deep(.el-tag) {
      margin-right: 6px;
    }

    .pagination {
      margin: 0 auto;
    }
  }
}
.el-card {
  border-radius: 10px;
}
</style>
